/**
 * 说 vue-router 和 react-router 前了解下路由的两种模式 hsah | history
 *  history 模式是html5新增的模式 多了 pushState() 和 replaceState() 方法前进后退，需要服务端支持
 *  history 在相同的URL输入也会触发 pushState() 推到记录栈中， 刷新或输入URL会向服务器请求(后退不会发起请求)。
 *  history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。
 *  history 每访问一个页面都要发起网络请求，每个请求都需要服务器进行路由匹配、数据库查询、生成HTML文档后再发送响应给浏览器，这个过程会消耗服务器的大量资源，给服务器的压力较大
 *
 *  hash 模式利用历史记录栈中 back() forward() go() 进行前进后退
 *  hash 模式通过 # 后面的变化触发 hashchange 事件， URL相同不会触发 hashchange 事件向服务器发送请求，不需要服务端支持
 *  hash 模式不利于SEO优化
 *  hash 模式本身是用 # 锚点定位所以在 hash 模式内，页面定位会失效。
 *  hash 变化不会导致向服务器请求前端 index.html 文件
 */
// 优点：
// 1、无感刷新界面
// 2、无需后端配置路由
// 3、路由显示路径更加明显，没有 .html .php 显示路径后缀。


// 前端单页面路由存在这些缺点：

// 1、使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存
// 2、单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置
// 3、使用 hash 模式原本的锚点功能就不能用了，hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制
// 4、 兼容问题，hash 模式兼容到IE8， history 模式兼容到IE10
// 5、白屏时间问题。浏览器需要等待 JavaScript 文件加载完成之后渲染 HTML 文档内容，用户等待时间稍长
// history 进行刷新页面时，无法找到url对应的页面，会出现 404 问题。
// 因为域名后面的路由是由前端控制的，后端只能保留域名部分，所以就会造成页面丢失的问题，需要服务器端添加一个回退路由，就能解决该问题了。



/** vue-router vs react-router */
// 1、vue-router仅支持对象形式的配置，react-router支持对象形式和JSX语法的组件形式配置
// 2、vue-router任何路由组件都会被渲染到<router-view/>位置，react-router子组件作为children被传入父组件，根组件被渲染到<Router/>位置。
// 3、vue-router在配置是指定模式，react-router是使用不同路由组件配置hash/history模式
// 4、vue-router使用this.router调用路由实例,this.route获取当前路由参数
// react-router
// import { useParams } from "react-router-dom";
// let { id } = useParams();
// this.props.history.push()


